<script lang="ts">
    import { Select as SelectPrimitive } from 'bits-ui';
    import CaretSort from '~icons/mdi/unfold-more-horizontal';
    import { cn } from '$lib/utils.js';

    type $$Props = SelectPrimitive.TriggerProps;
    type $$Events = SelectPrimitive.TriggerEvents;

    let className: $$Props['class'] = undefined;
    export { className as class };
</script>

<SelectPrimitive.Trigger
    class={cn(
        'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive [&>span]:line-clamp-1 data-[placeholder]:[&>span]:text-muted-foreground',
        className
    )}
    {...$$restProps}
>
    <slot />
    <div>
        <CaretSort class="h-4 w-4 opacity-50" />
    </div>
</SelectPrimitive.Trigger>
